<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style>
body{
	margin: 0;
	background:#FFF;
	}
#wrap{
	width:980px;
	margin:auto;
	min-height:800px;
	background:#C1C1C1;
	}
#box_center {
	width:500px;
	height:500px;
	border:#408080 solid 1px;
	background:#0F7156;	
}
.box_chil{
	width:100px;
	height:100px;
	float:left;
	background:#A6C8F0;
	border:#113E6F 1px solid;
	}
.box_content{
	display:none;	
	}
</style>
<?php
$array = array("A-1","A-2","B-1","B-2","C-1","C-2","D-1","D-2","E-1","E-2");
$numbers = array();
$rand = rand(0, count($array)-1);

function getrand($rand, $numbers, $array) {
 $i =0;
 while (in_array($rand, $numbers)) $rand = rand(0,count($array)-1);
 return $rand;

}
 
?>
<script language="javascript" type="text/javascript">

var count_click_elment = 0;
var old_value;
var old_id;      
                          	
$(document).ready(function(){
	$(".box_chil").click(function(){
		//console.log("ksadg f"+cout_click_elment);	
		
		var objID = this.id;
		var id = objID.replace("chil_","");
		
		$('#box_content_'+id).css("display","block");
		 count_click_elment++;
		
		
		var value = $('#box_content_'+id).text();
		
		if(count_click_elment == 1){
			old_value = value ;
			old_id = id;
			}
		else{
			value_pre = value.split('-');
			old_value_pre = old_value.split('-');			
			if(value_pre[0] == old_value_pre[0]){
				if(value == old_value){
					
					console.log(value+"-"+"old_value");
					$('#box_content_'+id).css("display","none");						
				}
				else{
					
					console.log(objID);
					
					$(objID).css("display","none");
					}	
				
			}
			else{
				console.log(value+"-"+old_value);			 
				$('#box_content_'+id).fadeOut("slow");					 
				$('#box_content_'+old_id).fadeOut("slow");			
				}
			count_click_elment = 0;
			
		}
		
		
		//
	});
	
});
</script>
</head>

<body>
<div id="wrap">
	<div id="box_center">
    	<?php for($i=0; $i<=count($array)-1; $i++) {
			 $n = getrand($rand, $numbers, $array);			 
 			array_push($numbers, $n);
			?>
        <div class="box_chil" id="chil_<?php echo $i;?> " >
        	<div class="box_content" id="box_content_<?php echo $i;?>"><?php echo  $array[$n]?></div>
        </div>
		
		<?php 
		}
		?>
       
    </div>
</div>
</body>
</html>
